<template>
  <div style="width: 100%; height: 100%; overflow: auto">
    <el-calendar v-model="calendarValue" :range="props.range || undefined" @change="handleChange">
      <template #date-cell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          {{ data.isSelected ? '✓' : '' }}
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElCalendar } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: [Date, Array],
    default: () => new Date()
  },
  range: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const calendarValue = ref(props.modelValue);

watch(
  () => props.modelValue,
  (newValue) => {
    calendarValue.value = newValue;
  }
);

const handleChange = (value: Date | [Date, Date]) => {
  emit('update:modelValue', value);
  emit('change', value);
  console.log('Calendar value changed:', value);
};
</script>

<style scoped>
.is-selected {
  color: #1989fa;
  font-weight: bold;
}
</style>
